<template>
	<view>
		<view class="page-fans padding-top-sm">
			<view class="cu-list menu sm-border custom-list">
				<block v-for="(item,index) of list" :key="index">
					<view class="cu-item">
						<view class="flex align-center justify-start">
							<image class="cu-avatar round custom-avatar margin-right-xs flex-shrink" :src="item.avatar" @click="showInfo(item.user_id)"/>
							<view class="text-sm">
								<view class="text-sm">
									<text class="margin-right-sm">{{item.nickname||'七言说'}}</text>
									<text v-if="item.status === 0">关注了你</text>
								</view>
								<view class="text-xs text-666">{{item.create_time_man}}</view>
							</view>
						</view>
						<view class="action">
							<button class="cu-btn round custom-btn-follow" :loading="item.attentionLoading">
								<!-- <view v-if="item.status === 0" @click="handleAttention(item.id,index)">互相关注</view> -->
								<view v-if="item.status === 0" @click="handleAttention(item.user_id,index)">
									<text class="cuIcon-add" />关注
								</view>
								<view v-else @click="handleUnAttention(item.user_id,index)">
									<text></text>取消关注
								</view>
							</button>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import profileMixin from "@/mixins/profile"
	export default {
		mixins: [profileMixin],
		data() {
			return {
				attentionLoading: false,
				query:{
					page: 1,
					size: 20
				}
			}
		},
		methods: {
			showInfo(id){
				this.$h.router.push({
					path: '/pages/my/my',
					params:{
						id
					}
				})
			},
			getList() {
				let fn = list => {
					return list.map(item => ({ ...item,
						attentionLoading: false
					}))
				}
				this.m_getList(this.$h.api.userModel.getMyFans, this.query, fn)
			},
			toPage(item) {
				if (item.type === 'jump') {
					uni.navigateTo({
						url: item.jumpPath
					})
				}
			},
			async handleAttention(attention_user_id, index) {
				//改变button的loading状态
				this.$set(this.list, index, {
					...this.list[index],
					attentionLoading: true
				})
				let query = {
					attention_user_id
				}
				let {
					code
				} = await this.$h.api.userModel.postLike(query)
				if (code === 1) {
					this.$set(this.list, index, {
						...this.list[index],
						status: 1,
						attentionLoading: false
					})
				}
			},
			async handleUnAttention(attention_user_id, index) {
				this.$set(this.list, index, {
					...this.list[index],
					attentionLoading: true
				})
				let query = {
					attention_user_id
				}
				let {
					code
				} = await this.$h.api.userModel.postUnLike(query)
				if (code === 1) {
					this.$set(this.list, index, {
						...this.list[index],
						status: 0,
						attentionLoading: false
					})
				}
			},
		},
		onLoad() {
			this.getList()
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.page-fans {
		.cu-btn.custom-btn-follow {
			&.active {
				background-color: $mainColor;
				color: #fff;

				.cuIcon-add {
					color: #fff;
				}
			}
		}

		.cu-list.menu.sm-border.custom-list {
			.cu-item {
				height: 110rpx;
				padding: 0 20rpx;

				&::after {
					border-bottom: 2rpx solid $bgColor;
					left: 20rpx;
					width: calc(200% - 40px);
				}

				.cu-avatar.custom-avatar {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
</style>
